<template>
  <nav class="nav-container">
    <div
      v-for="item in props.navItems"
      :key="item.label"
      :class="['nav-item', item.label === value ? activeClass : '', hoverClass]"
      @click="updateValue(item.label)"
    >
      <component :is="item.icon" class="icon" size="16" />
      {{ item.label }}
    </div>
  </nav>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, type PropType } from 'vue'

interface NavItem {
  label: string
  icon: string
}

const props = defineProps({
  navItems: {
    type: Array as PropType<NavItem[]>,
    required: true
  },
  value: {
    type: String,
    required: true
  },
  activeClass: {
    type: String,
    default: 'active'
  },
  hoverClass: {
    type: String,
    default: 'comm-item-hover'
  }
})

const emit = defineEmits(['update:value'])

const updateValue = (newValue: string) => {
  emit('update:value', newValue)
}
</script>

<style scoped lang="scss">
.nav-container {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 0;
  background-color: #f3f3f3;
}

.nav-item {
  height: 25px;
  display: flex;
  align-items: center;
  padding: 2px 15px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 0.5rem;
  line-height: 31px;
  color: #495464;
  font-weight: lighter;

  &.active {
    background-color: #fff;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-weight: bold;
    color: #155aef;

    .icon {
      color: #155aef;
    }
  }

  &.comm-item-hover:hover {
    background-color: #c0c0c0;
  }

  &:hover {
    background-color: #d1d1d1;
  }
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}
</style>
